<template>
  <div class="header">
    <div class="icon cursor_pointer" @click="goback">
      <el-icon size="2rem" color="#666">
        <ArrowLeft />
      </el-icon>
    </div>
    <img :src="userStore.categoryId === 1 ? subjectOne : subjectFour" alt="" class="header-bg" />
  </div>
  <main class="container">
    <section class="left-panel">
      <h2>考试须知：</h2>
      <ol>
        <li>遵守考场纪律，服从监考人员指挥。</li>
        <li>进入考场，手机关闭。禁止抽烟，禁止吃零食。</li>
        <li>未经工作人员允许，考生禁止随意出入考场。</li>
        <li>考场内禁止大声喧哗，禁止随意走动。</li>
        <li>考试中认真答题，不准交头接耳。</li>
        <li>考试中不准冒名顶替，不准弄虚作假。</li>
        <li>注意考场卫生，禁止随地吐痰，禁止乱扔纸屑。</li>
        <li>爱护公物及考试设备。</li>
      </ol>
    </section>

    <section class="right-panel">
      <div class="info">
        <p><strong>驾校理论考试01号考台：</strong></p>
        <p class="red marT20">身份证号：{{ userStore.storeInfo.idNumber }}</p>
        <p class="red marT20">考生姓名：{{ userStore.storeInfo.memberName }}</p>
      </div>
      <div class="center">
        <button class="start-btn" @click="toExam">开始考试</button>
      </div>
      <p class="operation-tip">
        操作提示：每题考试答案确定后，点击【下一题】，电脑立即判定所选答案，
        如选择错误，系统将提示正确答案，提示后不允许修改答案。
      </p>
    </section>
  </main>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/store/user'
import { ArrowLeft } from '@element-plus/icons-vue'
import subjectOne from '@/assets/img/realbg.png'
import subjectFour from '@/assets/img/subject-four.png'

const router = useRouter()
const userStore = useUserStore()
const toExam = () => {
  router.push('/realExam/exam')
}
const goback = () => {
  router.back()
}
</script>

<style scoped lang="scss">
@use 'sass:math';

@function rem($px) {
  @return math.div($px, 16) * 1rem;
}

/* 全局通用样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 顶部横幅图片 */
.header {
  width: 100%;
  position: relative;

  .icon {
    position: absolute;
    top: rem(70);
    left: rem(30);
  }
}

.header img {
  width: 100%;
  height: auto;
  display: block;
}

/* 主容器：两栏布局 */
.container {
  display: flex;
  width: 83.333333vw;
  margin: 1.666667vw auto 0;
  background: #f5f6f8;
  border: 1px solid #cccccc;
}

/* 左侧“考试须知” */
.left-panel {
  flex: 1 1 50%;
  border-right: 1px solid #ccc;
}

.left-panel,
.right-panel {
  padding: 2.083333vw;
}

.left-panel h2 {
  font-size: 1.354167vw;
  margin-bottom: 12px;
}

.left-panel ol {
  list-style-position: inside;
  line-height: 1.8;
  font-size: 1.145833vw;
  color: #444;
}

/* 右侧“考试信息” */
.right-panel {
  flex: 1 1 50%;
}

.info {
  margin-bottom: 20px;
  line-height: 1.6;
  color: #222;

  strong {
    font-size: 1.354167vw;
    color: #515a6e;
  }

  p {
    font-size: 1.145833vw;
  }
}

.center {
  text-align: center;
}

.start-btn {
  background-color: #02b0f3;
  color: white;
  font-size: clamp(0.95em, 2vw, 1.6em);
  padding: 10px 30px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.3s;
}

.start-btn:hover {
  background-color: #2981ce;
}

.red {
  color: #d32f2f;
}

.operation-tip {
  font-size: 0.9vw;
  color: #666;
  line-height: 1.5;
  margin-top: 3.333333vw;
}

.marT20 {
  margin-top: 0.833333vw;
}

@media (min-width: 1024px) {
  .header img {
    height: 300px;
  }
}
</style>
